<template>
  <div class="flex-column">
    <div class="flex justify-between flex-row-reverse">
      <div class="text-right flex flex-wrap justify-end">
        <el-input
          v-model.trim="queryData.keyword"
          v-filterCharacter
          class="mb-10"
          style="width: 300px"
          maxlength="32"
          clearable
          :placeholder="
            $t('LINK_SEGMENT_NAME') +
              '/' +
              $t('CABLE_NAME') +
              '/' +
              $t('NODE_NAME')
          "
          @keyup.enter.native="$debounce(search)"
        />
        <!-- <el-select
          v-if="pageName === 'linkSegment'"
          v-model="queryData.reach"
          class="ml-10 mb-10"
          clearable
          :placeholder="$t('REACHABLE_STATE')"
          style="width: 150px"
        >
          <el-option :label="$t('ACCESSIBLE')" :value="true" />
          <el-option :label="$t('UNREACHABLE')" :value="false" />
        </el-select> -->
        <el-select
          v-model="stationType"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          :placeholder="$t('SELECT_STATION')"
          @change="selectedIds = []"
        >
          <el-option value="no" :label="$t('NOT_A_Z')" />
          <el-option value="a" :label="$t('TRANS_DIRECT_START')" />
          <el-option value="z" :label="$t('TRANS_DIRECT_END')" />
        </el-select>
        <!-- 区域选择 -->
        <!-- 全部区域 -->
        <region-cascader
          v-show="stationType == 'no' || stationType == ''"
          style="width: 280px"
          class="ml-10 mb-10"
          :multiple="true"
          :selected-ids="selectedIds"
          @change="stationChange"
        />
        <!-- 占位用 -->
        <div v-show="stationType == 'no' || stationType == ''" style="width: 280px;" />
        <!-- A端站点 -->
        <region-cascader
          v-show="stationType === 'a' || stationType === 'z'"
          style="width: 280px"
          class="ml-10 mb-10"
          :selected-ids="selectedIds"
          :placeholder="stationType === 'a' ? 'A_END_STATION_NAME' : 'Z_END_STATION_NAME'"
          :multiple="true"
          @change="
            val => {
              stationType === 'a' ? aStationChange(val) : zStationChange(val)
            }
          "
        />
        <!-- Z端站点 -->
        <region-cascader
          v-show="stationType === 'a' || stationType === 'z'"
          style="width: 280px"
          class="ml-10 mb-10"
          :selected-ids="selectedIds"
          :placeholder="stationType === 'a' ? 'Z_END_STATION_NAME' : 'A_END_STATION_NAME'"
          :multiple="true"
          @change="
            val => {
              stationType === 'a' ? zStationChange(val) : aStationChange(val)
            }
          "
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{
          $t('QUERY')
        }}</el-button>
      </div>
      <div class="flex mb-10">
        <!--系统告警配置-->
        <template v-if="pageName === 'alarm'">
          <div class="flex">
            <el-button
              v-if="alarmPermission.parameter"
              type="primary"
              @click="$emit('showAlarmConfig', 'config')"
            >{{ $t('ALARM_PARAMETER') }}</el-button>
            <el-button
              v-if="alarmPermission.level"
              type="primary"
              @click="$emit('showAlarmConfig', 'severity')"
            >{{ $t('ALARM_SEVERITY') }}</el-button>
            <el-button v-if="alarmPermission.export" type="primary" @click="exportData">{{
              $t('EXPORT')
            }}</el-button>
          </div>
        </template>
        <template v-if="pageName === 'linkSegment' && permission.refresh">
          <el-button type="primary" class="ml-10" @click="$debounce(refreshSegment)">{{
            $t('REFRESH')
          }}</el-button>
        </template>
      </div>
    </div>
    <TableView
      ref="tableView"
      :table-header="tableHead"
      :table-data="tableData"
      :page-data="pageData"
      :operate-width="pageName === 'linkSegment' ? 140 : 100"
      :options="{ configure: pageName !== 'routine' }"
      @operate="operate"
      @pageChange="pageChange"
    />
  </div>
</template>

<script>
  import mixin from '@/mixin/linkSegmentListMixin'
  import { mapGetters } from 'vuex'
  import logicSegmentApi from '@/api/oen/LogicSegmentApi'
  import exportApi from '@/api/oen/ExportApi'
  import RegionCascader from '@/components/RegionCascader'
  import TableView from '@/components/TableView'
  import { downloadFile, getParentsById } from '@/utils/common'
  // let searchData = {} // 查询参数 只有点了查询有效
  export default {
    components: {
      RegionCascader,
      TableView
    },
    mixins: [mixin],
    props: {
      pageName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        searchData: {},
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          keyword: '',
          reach: this.pageName === 'linkSegment' ? true : '',
          startStationIdList: [],
          endStationIdList: [],
          stationIdList: []
        },
        selectedIds: [],
        stationType: '',
        tableData: []
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'stationTree']),
      permission() {
        return this.$store.getters.getAuthData('conf:linkSegment')
      },
      alarmPermission() {
        return this.$store.getters.getAuthData('conf:alarm')
      },
      detectPermission() {
        return this.$store.getters.getAuthData('link:detect')
      },
      invalidStatus() {
        return [
          { label: this.$t('TAKEEFFECT'), value: false },
          { label: this.$t('NOINVALID'), value: true }
        ]
      }
    },
    activated() {
      this.loadData()
    },
    methods: {
      doLayout() {
        this.$refs.tableView && this.$refs.tableView.resetSizeFn()
      },
      refreshSegment() {
        logicSegmentApi.incrementalRefresh().then(res => {})
      },
      loadData() {
        console.log('searchData', this.searchData)
        this.$emit('reloadAll', this.queryData)
        logicSegmentApi
          .queryPage(
            { ...this.searchData, filtrationBiz: this.pageName !== 'linkSegment' },
            { page: this.pageData.page, size: this.pageData.size }
          )
          .then(res => {
            this.tableData = res.list || []
            this.tableData.forEach(i => {
              i.startStationName = this.getRegionName(i.startStationId)
              i.endStationName = this.getRegionName(i.endStationId)
              i.startRoomName = this.getRoomName(i.startNode.roomId)
              i.endRoomName = this.getRoomName(i.endNode.roomId)
              i.reachName = i.reach ? this.$t('ACCESSIBLE') : this.$t('UNREACHABLE')
              i.btns = this.getBtns(i)
            })
            this.pageData.total = res.total
            this.$nextTick(() => {
              this.$refs.tableView.resetSizeFn()
            })
          })
      },
      getBtns(row) {
        const btns = [
          {
            key: 'mod',
            show:
              this.pageName === 'alarm' && this.alarmPermission.config,
            label: 'SET_THRESHOLD'
          },
          {
            key: 'view',
            show: this.pageName === 'linkSegment',
            label: 'VIEW'
          },
          {
            key: 'mod',
            show: this.pageName === 'linkSegment' && this.permission.chanel,
            label: 'CHANNEL'
          },
          {
            key: 'editName',
            show: this.pageName === 'linkSegment' && this.permission.mod,
            label: 'MOD'
          },
          {
            key: 'selectPort',
            show: this.pageName === 'detect' && this.detectPermission.manual,
            label: 'PROCESS_LIST_TASK_TYPE_MANUAL_DETECT'
          },
          {
            key: 'selectPort',
            show: this.pageName === 'routine',
            label: 'TIME_TEST'
          }
        ]
        return btns.filter(i => i.show)
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      // 机房
      getRoomName(roomId) {
        if (!roomId) return ''
        const stationData = this.baseRegionList.find(i => i.regionId === roomId)
        return stationData ? stationData.regionName : ''
      },
      // 区域搜索条件改变
      aStationChange(data) {
        this.queryData.startStationIdList = data
      },
      zStationChange(data) {
        this.queryData.endStationIdList = data
      },
      stationChange(data) {
        this.queryData.stationIdList = data
      },
      // 关键字搜索
      search() {
        this.pageData.page = 1
        this.searchData = { ...this.queryData }
        this.loadData()
      },
      operate(data) {
        this.$emit('operate', data)
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      // 导出文件
      exportData() {
        const queryData = {
          ...this.queryData,
          page: this.pageData.page,
          size: this.pageData.size,
          filtrationBiz: true
        }
        exportApi.logicSegment(queryData).then(res => {
          downloadFile(res, this.$t('MENU_LOSS_THRESHOLD'))
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
